<template>
  <div>
    <!-- <input type="text" v-iptLength="10" v-model="ipt"/> -->
    <!-- <textarea name="" v-model="ipt" v-iptLength="10"></textarea> -->
    <inputNum  maxLh='30' :isIpt='"textarea"'/>
  </div>
</template>

<script>
import inputNum from './views/inputNum'
export default {
  data(){
    return {
      ipt:''
    }
  },
  directives: {
    iptLength: {
      inserted(el, binding) {
        let warp = el.parentElement,
          elParent = document.createElement("div"),
          sp = document.createElement("span");
        warp.replaceChild(elParent, el);
        elParent.appendChild(el);
        elParent.appendChild(sp);
        sp.innerHTML = `0/${binding.value}`;
        elParent.style='display:inline-block;position:relative'
        el.tagName == 'TEXT'?
        sp.style='position:absolute;top:3px;right:5px;font-size:12px;color:#909399'
        :
        sp.style='position:absolute;bottom:5px;right:5px;font-size:12px;color:#909399'
        el.setAttribute('maxLength',binding.value)
      },
      update(el,binding) {
        let val = el.value.length,
            sp  = el.nextElementSibling;
        sp.innerHTML = `${val}/${binding.value}`
        val == binding.value ? (el.style='color:red') : el.style=''
      },
    },
  },
  components:{
    inputNum
  }
};
</script>

<style scoped>

</style>